<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .chart {
            width: 1000px;
            height: 600px;
            margin: 0 auto;
        }

        .chartDetail {
            width: 700px;
            height: 400px;
            margin: 0 auto;

        }

        .title {
            cursor: unset !important;
            font-size: 16px;
            opacity: 1 !important;
            font-weight: bold;
        }

        .table_title {
            padding: 10px;

        }

        .table_title .title {
            font-weight: bold;
            font-size: 16px;
        }

        .table_header {
            background-color: #ba55d3 !important;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-menu :default-active="pageIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            background-color="#ba55d3   " text-color="#fff">
            <el-menu-item disabled class="title">Fontys Paramedical School</el-menu-item>
            <el-menu-item index="1">Live Data</el-menu-item>
            <el-menu-item index="2">History Data</el-menu-item>
        </el-menu>
        <div class="app_main">
            <div class="liveData" v-if="pageIndex == 1" >
                <div ref="chart" class="chart" v-loading="chartLoading"></div>
            </div>
            <div class="historyData" v-if="pageIndex == 2">
                <el-row>
                    <el-col :span="3">&nbsp;</el-col>
                    <el-col :span="21" class="table">
                        <div v-show="!isShowDetail">
                            <div class="table_title">
                                <div class="title">SESSIONS</div>
                                <div class="sub_title">All you sessions</div>
                            </div>
                            <div class="table_content">
                                <el-table :data="tableData" style="width: 100%" header-cell-class-name="table_header">
                                    <el-table-column prop="time" label="Time" width="180">
                                    </el-table-column>
                                    <el-table-column prop="duration" label="Duration" width="180">
                                    </el-table-column>
                                    <el-table-column prop="device" label="Device">
                                    </el-table-column>
                                    <el-table-column prop="session" label="Session">
                                    </el-table-column>
                                    <el-table-column>
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="primary" @click="viewDetail(scope.row)">View
                                            </el-button>
                                            <el-button size="mini" type="success">Download</el-button>
                                            <el-popconfirm title="Are you sure to delete it？" cancel-button-text="no"
                                                confirm-button-text="yes" @confirm="confirmDelete(scope.row)"
                                                style="margin-left: 10px;">
                                                <el-button slot="reference" size="mini" type="danger">Delete</el-button>
                                            </el-popconfirm>

                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div v-show="isShowDetail">
                            <el-page-header @back="goBack" title="Back" content="Detail" style="margin: 10px;">
                            </el-page-header>
                            <div class="chartDetail" ref="chartDetail1"></div>
                            <div class="chartDetail" ref="chartDetail2"></div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
<script src="./node_modules/element-ui/lib/index.js"></script>
<script>
    const ss = new Date().toString()
    Vue.prototype.$message = ELEMENT.Message

    var app = new Vue({
        el: "#app",
        data: {
            pageIndex: "2",
            chartLoading:false,
            tableData: [{
                id: 1,
                time: ss,
                duration: "0h 19m 36s",
                device: 'A01FBA E4 3.2',
                session: '815416',
                chartData: [
                    {
                        "index": 484,
                        "SCL": 5.7445500145193344,
                        "SCR": 0.0,
                        "SCRvalues": [
                            {
                                "index": 319,
                                "value": 1.63566554204491
                            }
                        ]
                    },
                    {
                        "index": 485,
                        "SCL": 6.7445500145193344,
                        "SCR": 0.0,
                        "SCRvalues": [
                            {
                                "index": 319,
                                "value": 1.63566554204491
                            },
                            {
                                "index": 319,
                                "value": 1.63566554204491
                            }
                        ]
                    },
                    {
                        "index": 486,
                        "SCL": 12.1231231231231212,
                        "SCR": 0.0,
                        "SCRvalues": [
                            {
                                "index": 319,
                                "value": 12.63566554204491
                            },
                            {
                                "index": 319,
                                "value": 12.63566554204491
                            }
                        ]
                    },
                ],
            }, {
                id: 2,
                time: ss,
                duration: "0h 29m 36s",
                device: 'A01FBA E4 3.2',
                session: '815416',
                chartData: [
                    {
                        "index": 232,
                        "SCL": 56.7445500145193344,
                        "SCR": 0.0,
                        "SCRvalues": [
                            {
                                "index": 319,
                                "value": 1.63566554204491
                            }
                        ]
                    },
                    {
                        "index": 565,
                        "SCL": 12.7445500145193344,
                        "SCR": 0.0,
                        "SCRvalues": [
                            {
                                "index": 319,
                                "value": 1.63566554204491
                            },
                            {
                                "index": 319,
                                "value": 1.63566554204491
                            }
                        ]
                    },
                    {
                        "index": 486,
                        "SCL": 33.1231231231231212,
                        "SCR": 0.0,
                        "SCRvalues": [
                            {
                                "index": 319,
                                "value": 12.63566554204491
                            },
                            {
                                "index": 319,
                                "value": 12.63566554204491
                            }
                        ]
                    },
                ],
            }],
            isShowDetail: false,
            chartDetail1: null,
            chartDetail2: null,
            path: "ws://localhost:1234/websocket",
            ws: {},
            chartData: [],
            myChart: null,
        },
        methods: {

        },
        mounted() {
        },
        computed: {
            baseData() { //将json数据处理成图表需要的数据
                let xAxisData = []
                let cData = []
                this.chartData.forEach(d => {
                    xAxisData.push(d["index"])
                    cData.push(d["SCL"])
                })
                return { xAxisData, cData }
            }
        },
        watch: {
            pageIndex: function (newV, oldV) {
                if (newV == "1") {
                    this.$nextTick(() => {
                        this.initWebSocket()
                        this.initChart()

                    })
                } else {
                    //销毁echarts实例 断开websocket
                    this.myChart.dispose()
                    this.ws.close()

                }
            }
        },
        methods: {
            goBack() {
                this.isShowDetail = false
            },
            handleSelect(key, keyPath) {
                this.pageIndex = key
            },
            getTableInfo() {
            },
            initWebSocket() { //初始化websocket
                let _this = this
                this.chartLoading = true
                this.ws = new WebSocket(this.path)
                //监听是否连接成功
                this.ws.onopen = () => {
                    //连接成功则发送一个数据
                    this.ws.send('连接成功');
                    _this.chartLoading = false
                }

                //接听服务器发回的信息并处理展示
                this.ws.onmessage = (data) => {
                    let cData = JSON.parse(data.data)
                    if (this.chartData.length > 20) {
                        this.chartData.shift() //删除头部数据
                    }
                    this.chartData.push(cData) //尾部增加新数据
                    this.refreshChart(cData)
                }

                //监听连接关闭事件
                this.ws.onclose = () => {
                    //监听整个过程中websocket的状态
                    console.log('ws连接状态：' + this.ws.readyState);
                }

                //监听并处理error事件
                this.ws.onerror = function (error) {
                    _this.chartLoading = false
                    _this.$message.error('Failed to connect to the websocket');
                }
            },
            //查看详情
            viewDetail(row) {
                this.isShowDetail = true
                let parseData = this.parseData(row.chartData)
                this.$nextTick(() => {
                    this.initDetailChart(parseData)
                })
            },
            //更新图表
            refreshChart(cData) {
                this.myChart.setOption({ //重新设置参数 图表更新
                    title: {
                        text: 'ECharts',
                        subtext: `SCRvalues:${cData.SCRvalues.length}`
                    },
                    xAxis: {
                        data: this.baseData.xAxisData,
                    },
                    series: [{
                        data: this.baseData.cData,
                    }]
                });
            },
            //初始化图表
            initChart() {
                let chartDom = this.$refs.chart
                this.myChart = echarts.init(chartDom)
                // 初始化图表的配置项和数据
                var option = {
                    title: {
                        text: 'ECharts',
                        subtext: `SCRvalues:0`,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name: 'index',
                        data: this.baseData.xAxisData,
                    },
                    yAxis: {
                        type: 'value',
                        name: 'SCL',
                        boundaryGap: [0, '100%'],
                    },
                    series: [{
                        name: 'SCL',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: this.baseData.cData,
                        smooth: true //是否为曲线
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                this.myChart.setOption(option);
            },
            initDetailChart(chartData) {
                let chartDom1 = this.$refs.chartDetail1
                let chartDom2 = this.$refs.chartDetail2
                this.chartDetail1 = echarts.init(chartDom1)
                this.chartDetail2 = echarts.init(chartDom2)
                // 初始化图表的配置项和数据
                var option1 = {
                    title: {
                        text: 'ECharts1',
                        subtext: `SCRvalues:0`,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name: 'index',
                        data: chartData.xAxisData,
                    },
                    yAxis: {
                        type: 'value',
                        name: 'SCL',
                        boundaryGap: [0, '100%'],
                    },
                    series: [{
                        name: 'SCL',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: chartData.cData,
                        smooth: true //是否为曲线
                    }]
                };
                var option2 = {
                    title: {
                        text: 'ECharts2',
                        subtext: `SCRvalues:0`,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name: 'index',
                        data: chartData.xAxisData,
                    },
                    yAxis: {
                        type: 'value',
                        name: 'SCL',
                        boundaryGap: [0, '100%'],
                    },
                    series: [{
                        name: 'SCL',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: chartData.cData,
                        smooth: true //是否为曲线
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                this.chartDetail1.setOption(option1);
                this.chartDetail2.setOption(option2);
            },
            //处理数据
            parseData(chartData) { //将json数据处理成图表需要的数据
                let xAxisData = []
                let cData = []
                chartData.forEach(d => {
                    xAxisData.push(d["index"])
                    cData.push(d["SCL"])
                })
                return { xAxisData, cData }
            },
            //确认删除
            confirmDelete(row) {
                //删除的行信息
                console.log(row);
                this.$message({
                    message: `你删除的行信息为:${JSON.stringify(row)}`,
                    type: 'success'
                });
            }
        }

    })
</script>
<!-- <script>
    // {"index":484,"SCL":5.7445500145193344,"SCR":0.0,"SCRvalues":[{"index":319,"value":1.63566554204491}]}
    var app = new Vue({
        el: "#app",
        data: {
            path: "ws://localhost:1234/websocket", //websocket 链接地址
            ws: {},
            chartData: [ //模拟数据
                {
                    "index": 484,
                    "SCL": 5.7445500145193344,
                    "SCR": 0.0,
                    "SCRvalues": [
                        {
                            "index": 319,
                            "value": 1.63566554204491
                        }
                    ]
                },
                {
                    "index": 485,
                    "SCL": 6.7445500145193344,
                    "SCR": 0.0,
                    "SCRvalues": [
                        {
                            "index": 319,
                            "value": 1.63566554204491
                        },
                        {
                            "index": 319,
                            "value": 1.63566554204491
                        }
                    ]
                },
            ],
            myChart: null,
        },
        mounted() {
            this.initChart()
            this.initWebSocket()
        },
        computed: {
            baseData() { //将json数据处理成图表需要的数据
                let xAxisData = []
                let cData = []
                this.chartData.forEach(d => {
                    xAxisData.push(d["index"])
                    cData.push(d["SCL"])
                })
                return { xAxisData, cData }
            }
        },
        methods: {
            initWebSocket() { //初始化websocket
                this.ws = new WebSocket(this.path)
                //监听是否连接成功
                this.ws.onopen = () => {
                    console.log('ws连接状态：' + this.ws.readyState);
                    //连接成功则发送一个数据
                    this.ws.send('连接成功');
                }

                //接听服务器发回的信息并处理展示
                this.ws.onmessage = (data) => {
                    console.log('接收到来自服务器的消息：');
                    let cData = JSON.parse(data.data)
                    if (this.chartData.length > 20) {
                        this.chartData.shift() //删除头部数据
                    }
                    this.chartData.push(cData) //尾部增加新数据
                    this.refreshChart(cData)
                }

                //监听连接关闭事件
                this.ws.onclose = () => {
                    //监听整个过程中websocket的状态
                    console.log('ws连接状态：' + this.ws.readyState);
                }

                //监听并处理error事件
                this.ws.onerror = function (error) {
                    console.log(error);
                }
            },
            //更新图表
            refreshChart(cData) {
                this.myChart.setOption({ //重新设置参数 图表更新
                    title: {
                        text: 'ECharts',
                        subtext: `SCRvalues:${cData.SCRvalues.length}`
                    },
                    xAxis: {
                        data: this.baseData.xAxisData,
                    },
                    series: [{
                        data: this.baseData.cData,
                    }]
                });
            },
            //初始化图表
            initChart() {
                let chartDom = this.$refs.chart
                this.myChart = echarts.init(chartDom)
                // 初始化图表的配置项和数据
                var option = {
                    title: {
                        text: 'ECharts',
                        subtext: `SCRvalues:0`,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name: 'index',
                        data: this.baseData.xAxisData,
                    },
                    yAxis: {
                        type: 'value',
                        name: 'SCL',
                        boundaryGap: [0, '100%'],
                    },
                    series: [{
                        name: 'SCL',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: this.baseData.cData,
                        smooth: true //是否为曲线
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                this.myChart.setOption(option);
            }
        }
    })
</script> -->

</html>